
<script lang="ts" setup>
import { useRoute } from 'vue-router'
import { Timer } from '@element-plus/icons-vue'
import { ref, watch } from 'vue'

const route = useRoute()

const tableData = ref([{
  date: route.params.id,
  name: route.params.title,
  address: '是傻Ⅹ吗'
}])

// 监听路由参数变化
watch(() => route.params,
  (newParams) => {
    tableData.value = [{
      date: newParams.id,
      name: newParams.title,
      address: '是个大傻Ⅹ'
    }]
  },
  { immediate: true }
)

// 添加点击事件监听
const handleRowClick = (row: any) => {
  console.log('行点击事件:', row)
}
</script>

<template>
  <div class="deails">
    <h1>产品标题:{{route.params.title}}</h1>
    <h1>产品编号:{{route.params.id}}</h1>
    <el-table 
      :data="tableData" 
      style="width: 100%"
      @row-click="handleRowClick">
      <el-table-column prop="date" label="Date" width="180" />
      <el-table-column prop="name" label="Name" width="180" />
      <el-table-column prop="address" label="Address" />
    </el-table>
  </div>
</template>

<style scoped>
.deails {
  background-color: aqua;
  padding: 20px;
}
h1 {
  margin: 0;
  margin-top: 20px;
}
</style>
